@tailwind base;
@tailwind components;
@tailwind utilities;

/* Fonts */

html {
  font-family: Nunito,'Noto Sans', 'Noto Sans TC','M PLUS Rounded\ 1c',system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif
  /* use Traditional Chinese as default Chinese Character */
}
html[lang="zh-CN"] {
  font-family: Nunito,'Noto Sans', 'Noto Sans SC','M PLUS Rounded\ 1c',system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif
}
html[lang="zh-FJ"] {
  font-family: Nunito,'Noto Sans', 'Noto Sans SC','M PLUS Rounded\ 1c',system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif
}
html[lang="zh-TW"] {
  font-family: Nunito,'Noto Sans', 'Noto Sans TC','M PLUS Rounded\ 1c',system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif
}
html[lang="ja-JP"] {
  font-family: Nunito,'Noto Sans', 'Noto Sans JP','M PLUS Rounded\ 1c',system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif
}
html[lang="ko-KR"] {
  font-family: Nunito,'Noto Sans', 'Noto Sans KR','M PLUS Rounded\ 1c',system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif
}
body {
  @apply bg-black bg-opacity-30 break-words min-w-[380px]
}

/* Scrollbar */

::-webkit-scrollbar {
  /* width : 12px; */
  /* height: 8px; */
  @apply w-3 h-2
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  @apply bg-neutral-content
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  @apply bg-neutral
}

/* Cytoid */

.bg-image-loading {
  @apply bg-cover bg-center;
  background-image: url('~/assets/loading.svg');
  background-size: 20%;
  background-repeat: no-repeat;
}

.category-badge-featured {
  @apply text-base-content font-bold border-none;
  background: linear-gradient(to right bottom, #df3090, #f953c6);
  order: 1;
}
.category-badge-qualified {
  @apply text-base-content font-bold border-none;
  background: linear-gradient(to right bottom, #1D976C, #1cb068);
  order: 2;
}

.bg-featured {
  @apply bg-gradient-to-br from-[#df3090] to-[#f953c6]
}

.bg-qualified {  
  @apply bg-gradient-to-br from-[#1D976C] to-[#1cb068]
}

.bg-featured\/25 {
  @apply bg-gradient-to-br from-[#df309040] to-[#f953c640]
}

.bg-qualified\/25 {  
  @apply bg-gradient-to-br from-[#1D976C40] to-[#1cb06840]
}

.bg-featured\/50 {
  @apply bg-gradient-to-br from-[#df309080] to-[#f953c680]
}

.bg-qualified\/50 {  
  @apply bg-gradient-to-br from-[#1D976C80] to-[#1cb06880]
}

.bg-featured\/75 {
  @apply bg-gradient-to-br from-[#df3090C0] to-[#f953c6C0]
}

.bg-qualified\/75 {  
  @apply bg-gradient-to-br from-[#1D976CC0] to-[#1cb068C0]
}


.diff-badge-easy {
  @apply text-base-content border-none text-white !important;
  background: linear-gradient(to bottom right, #4ca2cd, #67B26F);
  order: 1;
}

.diff-badge-hard {
  @apply text-base-content border-none text-white !important;
  background: linear-gradient(to top left, #B06AB3, #4568DC);
  order: 2;
}

.diff-badge-extreme {
  @apply text-base-content border-none text-white !important;
  background: linear-gradient(to top left, #6f0000, #200122);
  order: 3;
}

.diff-bg-easy {
  @apply text-base-content border-none text-white !important;
  background: linear-gradient(to top left, #4ca2cd, #67B26F);
}

.diff-bg-hard {
  @apply text-base-content border-none text-white !important;
  background: linear-gradient(to bottom right, #B06AB3, #4568DC);
}

.diff-bg-extreme {
  @apply text-base-content border-none text-white !important;
  background: linear-gradient(to bottom right, #700f0f, #4d0000);
}

.grade-max-text-gradient {
  @apply bg-clip-text text-transparent bg-gradient-to-tl from-[#0096FF] to-[#EC00C6];
}

.grade-sss-text-gradient,
.grade-ss-text-gradient,
.grade-s-text-gradient {
  @apply bg-clip-text text-transparent bg-gradient-to-br from-[#FFC53D] to-[#FF5E07];
}

.grade-aa-text-gradient,
.grade-a-text-gradient {
  @apply bg-clip-text text-transparent bg-gradient-to-br from-[#FDEB70] to-[#E25FA6];
}

.grade-b-text-gradient,
.grade-c-text-gradient {
  @apply bg-clip-text text-transparent bg-gradient-to-br from-[#95C529] to-[#3DB1C5];
}

.grade-text-gradient {
  @apply bg-clip-text text-transparent bg-gradient-to-br from-[#99A8D1] to-[#474E61];
}

/* Tailwind */
.prose :where(hr):not(:where([class~="not-prose"] *)) {
  @apply my-4
}

.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
  @apply bg-base-200/50 py-1
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::before{
  content: none;
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::after{
  content: none;
}

.prose :where(details):not(:where([class~="not-prose"] *)){
  @apply collapse collapse-open
}
.prose :where(details > summary):not(:where([class~="not-prose"] *)){
  @apply collapse-title select-none cursor-pointer
}
.prose :where(details > *:not(summary)):not(:where([class~="not-prose"] *)){
  @apply collapse-content visible
}

/* Resets */
iframe {
  color-scheme: light;
}

/* Daisyui */
.capsule {
  @apply badge badge-lg py-5 px-4
}

.capsule .capsule-icon {

}

.card-subtitle {
  @apply font-bold uppercase opacity-80;
}

.btn.btn-ghost.btn-disabled, .btn.btn-ghost[disabled], .btn.btn-ghost:disabled {
  --tw-text-opacity: 0.25;
  @apply bg-transparent;
}

/* Custom Util Class */

.clickable {
  @apply active:scale-95 duration cursor-pointer
}
.not-clickable {
  @apply cursor-default
}

.duration-fast {
  @apply duration-100
}
.duration {
  @apply duration-150
}
.duration-slow {
  @apply duration-300
}